<%@ page language="java" pageEncoding="utf8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="<c:url value="/css/shopadmin.css"/>" type="text/css" />
		<link rel="stylesheet" href="<c:url value='/scripts/themes/base/jquery.ui.all.css'/>" type="text/css" />
	</head>
	<body style="">
		<div id="headBar" class="head_content"></div> 
		<div id="main" class="main_content">
			<form id="package_form" method="post" action="mt_package_save.html">
				<input class="x-input " value="${goodsPackage.gpackageId}" name="goodsPackage.gpackageId" type="hidden" />
				<div class="tableform">
					<div class="division">
						<table border="0" cellpadding="0" cellspacing="0" width="100%">
							<!-- <tr> <th>捆绑商品编号：</th> <td><input autocomplete="off" class="x-input " type="text" name="bn" vtype="text" /></td> </tr>-->
							<tbody>
								<tr>
									<th>
										捆绑商品名称：
									</th>
									<td>
										<input value="${goodsPackage.name }" class="x-input " name="goodsPackage.name" type="text">
									</td>
								</tr>
								<tr>
									<th>
										捆绑商品简介：
									</th>
									<td>
										<textarea name="goodsPackage.description" style="width: 70%;">${goodsPackage.description }</textarea>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="division">
						<table border="0" cellpadding="0" cellspacing="0" width="100%">
							<tbody>
								<tr>
									<th>
										是否上架销售：
									</th>
									<td>
										<select id="goodsPackage_showOn" name="goodsPackage.showOn">
											<option value="true">
												是
											</option>
											<option value="false">
												否
											</option>
										</select>
									</td>
								</tr>
								<tr>
									<th>
										库存：
									</th>
									<td>
										<input class="x-input " name="goodsPackage.packageStore" value="${goodsPackage.packageStore}" style="width: 50px;" type="text">
									</td>
								</tr>
								<tr>
									<th>
										重量：
									</th>
									<td>
										<input class="x-input " value="${goodsPackage.weight }" style="width: 50px;" name="goodsPackage.weight" type="text">
											克(g) 
									</td>
								</tr>
								<tr>
									<th>
										原价格：
									</th>
									<td>
										<input value="${goodsPackage.mktPrice }" class="x-input " id="package_mkt_price" style="width: 50px;" name="goodsPackage.mktPrice" type="type" readonly="readonly">
									</td>
								</tr>
								<tr>
									<th>
										捆绑销售价：
									</th>
									<td>
										<fmt:message key="common_currency" />
										<input class="x-input " name="goodsPackage.packageDiscount" value="${goodsPackage.packageDiscount }" style="width: 80px;" type="text">
									</td>
								</tr>

								<tr>
									<th>
										排序顺序：
									</th>
									<td>
										<input class="x-input " value="${goodsPackage.showOrder}" style="width: 50px;" name="goodsPackage.showOrder" type="text">
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="division">
						<table id="pkg-item" border="0" cellpadding="0" cellspacing="0" width="100%">
							<tbody>
								<tr>
									<th>
										商品选择：
									</th>
									<td id="packageItem">
										<div id="" class="clearfix">
											<div class="object-select clearfix">
												<div class="label" onclick="openProductDialog()">
													请选择...
												</div>
												<div class="handle" onclick="openProductDialog()">
													&nbsp;
												</div>
											</div>
											<div class="gridlist rows-body" id="pp_row_box">
											</div>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="table-action">
						<button type="submit" class="btn">
							<span><span>完成</span> </span>
						</button>
					</div>
				</div>
			</form>
		</div>
		<div id="footBar" class="foot_content"></div>



		<div id="relative-dialog" title="商品列表">
			<div id="search-tab">
				<div id="selector-panel-form">
					<div id=" ">
						<div class="gridlist">
							<div class="row">
								<div class="row-line">
									<div class="span-3">
										销售价
									</div>
									<div class="span-3">
										<select class="x-input-select  inputstyle" id="search_price_selector" name="goodsProductsSelectParameter.priceSelector">
											<option value="than">
												大于
											</option>
											<option value="lthan">
												小于
											</option>
											<option value="equal">
												等于
											</option>
											<option value="sthan">
												小于等于
											</option>
											<option value="bthan">
												大于等于
											</option>
										</select>
										&nbsp;
									</div>
									<div class="span-6">
										<input class="x-input" name="goodsProductsSelectParameter.price" id="search_price" value="" type="text" />
									</div>
									<div class="span-1">

									</div>
								</div>
							</div>
							<div class="row">
								<div class="row-line">
									<div class="span-3">
										货号
									</div>
									<div class="span-3">
										&nbsp;
									</div>
									<div class="span-6">
										<input class="x-input " name="goodsProductsSelectParameter.bn" type="text" id="search_bn" />
									</div>
									<div class="span-1">

									</div>
								</div>
							</div>
							<div class="row">
								<div class="row-line">
									<div class="span-3">
										货品名称
									</div>
									<div class="span-3">

										&nbsp;
									</div>
									<div class="span-6">
										<input class="x-input " name="goodsProductsSelectParameter.name" type="text" id="search_name" />
									</div>
									<div class="span-1">

									</div>
								</div>
							</div>
							<div class="row">
								<div class="row-line">
									<div class="span-3">
										上架
									</div>
									<div class="span-3">
										&nbsp;
									</div>
									<div class="span-6">

										<select class="x-input-select  inputstyle" name="goodsProductsSelectParameter.marketOn" id="search_marketOn">
											<option value="">
												无
											</option>
											<option value="true">
												上架
											</option>
											<option value="false">
												下架
											</option>

										</select>
										&nbsp;
									</div>
									<div class="span-1">

									</div>
								</div>
							</div>
							<div class="row">
								<div class="row-line">
									<div class="span-3">
										库存
									</div>
									<div class="span-3">
										<select class="x-input-select  inputstyle" name="goodsProductsSelectParameter.storeSelector" id="search_store_selector">
											<option value="than">
												大于
											</option>
											<option value="lthan">
												小于
											</option>
											<option value="equal">
												等于
											</option>
											<option value="sthan">
												小于等于
											</option>
											<option value="bthan">
												大于等于
											</option>
										</select>
										&nbsp;
									</div>
									<div class="span-6">
										<input class="x-input " name="goodsProductsSelectParameter.store" type="text" id="search_store" />
									</div>
									<div class="span-1">

									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
				<div class="scrollhandle toLeft gridlist-head" style="text-align: left;">
					<button type="button" class="btn" onclick="searchSubmit(1)">
						<span><span>&lt;&lt;筛选并返回列表</span> </span>
					</button>
				</div>
			</div>
			<div id="search-result" style='display: none;'>
				<div class="scrollhandle toRight gridlist-head" style="text-align: right;">
					<button type="button" class="btn" onclick="searchTab()">
						<span><span>筛选&gt;&gt;</span> </span>
					</button>
				</div>
				<div class="gridlist selectorlist" id="selector-body">


				</div>
				<div class="dialog-content-foot">
					<div class="table-action">
						<button class="btn" onclick="addRow();$('#relative-dialog').dialog('close');" type="button">
							<span><span>确定</span> </span>
						</button>
						<button class="btn" onclick="searchTab();$('#relative-dialog').dialog('close');" type="button">
							<span><span>取消</span> </span>
						</button>
					</div>
				</div>
			</div>
		</div>
		<div id="goods-result-row-tmpl" style="display: none;">
			<div class="row">
				<div class="row-line">
					<input name="selected_product" vname="#name#" value="#productId#" goodsId="#goodsId#" mktprice="#mkt_price#" type="checkbox" />
					<label for="edit_sel__0">
						#name#
					</label>
				</div>
			</div>
		</div>
		<div id="goods-row-tmpl" style="display: none;">
			<div class="row">
				<div class="row-line">
					<div class="span-1">
						<span class="opt"><img style="width: 16px; height: 16px; background-position: 0pt -214px;" class="imgbundle" onclick="deleteRow(this,#ppID#)"
								src="<c:url value="/images/transparent.gif"/>" /> </span>
					</div>
					<div class="span-auto  " style="width: 350px;">
						<input type="hidden" value="#productId#" name="marketPackageProducts[#index#].productId" />
						<input type="hidden" value="#goodsId#" name="marketPackageProducts[#index#].goodsId" />
						#name#
					</div>
					<div class="span-6">
						数量:
						<input type="text" onblur="checkAllCost()" value="#pkgCount#" mktprice="#mkt_price#" style="width: 50px; text-align: right;" name="marketPackageProducts[#index#].pkgCount"
							class="x-input {required:true,number:true,  messages:{required:'必填 字段',number:'请输入数字'} }" />

					</div>
				</div>
			</div>
		</div>







		<script type="text/javascript" src="<c:url value='/scripts/jquery-1.4.2.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/jquery.bgiframe-2.1.1.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.core.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.widget.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.mouse.js'/> "></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.button.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.draggable.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.position.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.ui.dialog.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.effects.core.js'/> "></script>
		<script type="text/javascript" src="<c:url value='/scripts/ui/jquery.effects.drop.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/jquery.validate.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/scripts/jquery.metadata.js'/>"></script>
		<script type="text/javascript">
		<c:if test="${not empty goodsPackage.gpackageId}">
			$('#goodsPackage_showOn').attr('value', '${goodsPackage.showOn}');
		</c:if>
	String.prototype.replaceAll = function(s1, s2) {
			return this.replace(new RegExp(s1, "gm"), s2);
	}
	
	
	
	function searchSubmit(page_id){
			var url = "gd_products_jsonSearch.html";
			
			var params = {
				"pagerId"  		:	page_id,
				"goodsProductsSelectParameter.catId"    		: 	$('#search_catId').val(),
				"goodsProductsSelectParameter.brandId" 		: 	$('#search_brandId').val(),
				"goodsProductsSelectParameter.priceSelector" : $('#search_price_selector').val(),
				"goodsProductsSelectParameter.price" : $('#search_price').val(),
				"goodsProductsSelectParameter.bn" : $('#search_bn').val(),
				"goodsProductsSelectParameter.name" : $('#search_name').val(),
				"goodsProductsSelectParameter.storeSelector" : $('#search_store_selector').val(),
				"goodsProductsSelectParameter.store" : $('#search_store').val(),
				"goodsProductsSelectParameter.marketOn"    :  $('#search_marketOn').val()
			};

			$.post(url, params, 
				function callback(data) 
				{	
					var goodsProductss = data.goodsProductss;
					$('#selector-body').html('');
					$.each( goodsProductss, function(i, goodsProducts){  				
					
		  				var tmpl = $('#goods-result-row-tmpl').html();
						tmpl = tmpl.replaceAll('#name#', goodsProducts.name);	
						tmpl = tmpl.replaceAll('#productId#', goodsProducts.productId);
						tmpl = tmpl.replaceAll('#mkt_price#', goodsProducts.mktPrice);
						tmpl = tmpl.replaceAll('#goodsId#', goodsProducts.goodsId);
						$('#selector-body').append(tmpl);
  							
  					});
  					var pagerStr = data.pagerString;
  					$('<div class="gridlist-footer" >'+pagerStr +'</div>').appendTo('#selector-body');
				},
				"json"
			);
			
			$('#search-tab').css("display","none");
			$('#search-result').css("display","");
			
		
		}
		
		function deleteRow(clickObj,ppId){
			if(!confirm('<fmt:message key="common.confirm_deleted" />')){
				return;
			}
			if(ppId!=0){
				deletePackageProduct(ppId);
			}
			$(clickObj).parent().parent().parent().remove(); 
		}
		
		function deletePackageProduct(ppId){
			var url = "mt_package_product_delete.html";
			var params = {
				"ppId"  		:	ppId

			};

			$.getJSON(url, params, 
				function callback(data) 
				{	
					alert("删除成功");
				}
			);
			
			 
			
		
		}
		
		
		function searchTab(){
			$('#search-tab').css("display","");
			$('#search-result').css("display","none");
		}
		 		
		var pp_index=${fn:length(marketPackageProducts)};
		function addRow(){
				//name = selected_rate_goods;
				
			var existedRate = $("#pp_row_box >div >div >div > input:hidden");			
			$("input[name='selected_product']").each(function(index, domEle) {
				if($(domEle).attr("checked")){
					var bool =true;
					existedRate.each(function(ind, dome){
						if($(domEle).val()==$(dome).val()){
							bool = false;
							return;
						}					
					});
					if(bool){
						//var tmpl = $('#goods-row-tmpl').html();
						//tmpl = tmpl.replaceAll('#name#', $(domEle).attr("vname"));	
						//tmpl = tmpl.replaceAll('#productId#', $(domEle).val());
						//tmpl = tmpl.replaceAll('#index#', pp_index);
						//tmpl = tmpl.replaceAll('#ppID#', 0);
						//tmpl = tmpl.replaceAll('#mkt_price#', $(domEle).attr("mktprice"));
						 addTmplRow($(domEle).attr("vname"),$(domEle).val(),0, $(domEle).attr("mktprice"),'1');
						
  						 	
					}
					
				} 
			});
			
			// init back
			searchTab();
			$('#selector-body').html('');
			
		}
		
		function addTmplRow(name,productId,ppId,mktPrice,pkgCount ,goodsId){
				var tmpl = $('#goods-row-tmpl').html();
				tmpl = tmpl.replaceAll('#name#', name);	
				tmpl = tmpl.replaceAll('#productId#', productId);
				tmpl = tmpl.replaceAll('#index#', pp_index);
				tmpl = tmpl.replaceAll('#ppID#', ppId);
				tmpl = tmpl.replaceAll('#mkt_price#', mktPrice);
				tmpl = tmpl.replaceAll('#pkgCount#', pkgCount);		
				tmpl = tmpl.replaceAll('#goodsId#', goodsId);			
				pp_index++;	
				alert(tmpl);
				$('#pp_row_box').append(tmpl);
		}
		
		function checkAllCost(){
			var total= 0 ;
			$("#pp_row_box > div > div> div> input[mktprice]").each(function(index, element) {
				var count = $(element).attr('value').trim();
				if(count==''||isNaN(count)){
					alert('请输入数字');
					return;					
				}
				var mktprice = $(element).attr('mktprice');
				total+= count * mktprice;
			});
			
			$('#package_mkt_price').val(total);
		}
		
		
		
		$(function() {	
			
        	$("#relative-dialog").dialog({
				autoOpen: false,
				height: 350,
				width: 550,
				modal: true,
				close: function() {
					searchTab();
					$('#selector-body').html('');
				}
			});
        });
        function openProductDialog(){		 	
			$('#relative-dialog').dialog('open');
		}
	
	
	
	
	
	
	<c:forEach var="mpp" items="${marketPackageProducts}"
								varStatus="index">
			addTmplRow( '${mpp.name}' ,${mpp.productId },${mpp.ppId},${mpp.mktPrice},${mpp.pkgCount},${mpp.goodsId} );
		</c:forEach>
	
	
	
	
	
	
	
	
	
	
	
	$(document).ready(function() {
		var validator = $("#package_form").validate( {
			errorElement : "div",
			errorClass : "x-vali-error",
			onfocusout : false,
			rules : {
				'goodsPackage.name' : "required",
				'goodsPackage.weight' : {
					required : true,
					number : true
				},
				'goodsPackage.packageDiscount' : {
					required : true,
					number : true
				},
				'goodsPackage.packageStore' : {
					required : true,
					number : true
				},
				'goodsPackage.description' : {
					required : true 
				},
				'goodsPackage.showOrder' : {
					required : true,
					number : true
				}
			},
			messages : {
				'goodsPackage.name' : "必填字段",
				'goodsPackage.weight' : {
					required : "必填字段",
					number : "请输入数字"
				},
				'goodsPackage.packageDiscount' : {
					required : "必填字段",
					number : "请输入数字"
				},
				'goodsPackage.packageStore' : {
					required : "必填字段",
					number : "请输入数字"
				},
				'goodsPackage.description' : {
					required : "必填字段" 
				},
				'goodsPackage.showOrder' : {
					required : "必填字段",
					number : "请输入数字"
				}
			},
			errorPlacement : function(error, element) {
				element.removeClass('x-vali-error');
				error.appendTo(element.parent());

			},

			success : function(div) {
				$(div).remove();
			}
		});
	});
</script>
	</body>
</html>